/**
 * We render markdown in the following places:
 * - In the hint tooltip when typing in the operation editor (field description
 *   and, optionally, deprecation reason).
 * - In the info tooltip when hovering over a field in the operation editor
 *   (field description and, optionally, deprecation reason).
 */

.graphiql-markdown-description,
.graphiql-markdown-deprecation {
  & blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--px-8);
  }

  & code,
  & pre {
    border-radius: var(--border-radius-4);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-inline-code);
  }

  & code {
    padding: var(--px-2);
  }

  & pre {
    overflow: auto;
    padding: var(--px-6) var(--px-8);
  }

  & pre code {
    background-color: initial;
    border-radius: 0;
    padding: 0;
  }

  & ol,
  & ul {
    padding-left: var(--px-16);
  }

  & ol {
    list-style-type: decimal;
  }

  & ul {
    list-style-type: disc;
  }

  & img {
    border-radius: var(--border-radius-4);
    max-height: 120px;
    max-width: 100%;
  }

  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }
}

.graphiql-markdown-description {
  & a {
    color: hsl(var(--color-primary));
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  & blockquote {
    border-left: 1.5px solid hsla(var(--color-neutral), var(--alpha-tertiary));
  }

  & code,
  & pre {
    background-color: hsla(var(--color-neutral), var(--alpha-background-light));
    color: hsl(var(--color-neutral));
  }

  & > * {
    margin: var(--px-12) 0;
  }
}

.graphiql-markdown-deprecation {
  & a {
    color: hsl(var(--color-warning));
    text-decoration: underline;
  }

  & blockquote {
    border-left: 1.5px solid hsl(var(--color-warning));
  }

  & code,
  & pre {
    background-color: hsla(var(--color-warning), var(--alpha-background-heavy));
  }

  & > * {
    margin: var(--px-8) 0;
  }
}

.graphiql-markdown-preview > :not(:first-child) {
  display: none;
}
